<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./demo.js"></script>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .box1 {
        position: absolute; 
        width: 500px;
        height: 500px;
        overflow: hidden;
        /* position: relative; */
        top: 50%;
        left: 75%;
        margin-top: -250px;
        margin-left: -250px;
    }

    .box2 {
        position: absolute;
        width: 500px;
        height: 500px;
        overflow: hidden;
        /* position: relative; */
        top: 50%;
        left: 25%;
        margin-top: -250px;
        margin-left: -250px;
    }

    .box img {
        width: 500px;
        height: 500px;
    }

    ul {
        list-style: none;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -60px;
    }

    ul li {
        float: left;
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 50%;
        margin-right: 10px;
    }

    ul li.active {
        background: blue;
    }
</style>

<body>
    <div class="box box1">
        <img src="./img/原神1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="box box2 ">
        <img src="./img/原神1.jpg" alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        (function () {
            let num = 1
            let t
            function startlunbo() {
                t = setInterval(() => {
                    num++
                    if (num > 6) num = 1
                    document.querySelector('.box1 img').src = `./img/原神${num}.jpg`
                    // 圆圈同步变化
                    document.querySelector('.box1 li.active').className = ''
                    let ulliobjs = document.querySelectorAll('.box1 li')
                    ulliobjs[num - 1].className = 'active'
                }, 1000);
            }
            startlunbo()
            // 鼠标移入停止定时器
            let pageobj = document.querySelectorAll('.box1 ul li')
            pageobj.forEach((item, i) => {
                //绑定移入事件
                item.onmouseover = function () {
                    clearInterval(t)
                    // 同步图片
                    document.querySelector('.box1 img').src = `./img/原神${i + 1}.jpg`
                    num = i + 1
                    document.querySelector('.box1 li.active').className = ''
                    document.querySelectorAll('.box1 li')[i].className = 'active'
                }
                item.onmouseout = function () {
                    startlunbo()
                }
            });
        })();

        (function () {
            let num = 1
            let t
            function startlunbo() {
                t = setInterval(() => {
                    num++
                    if (num > 6) num = 1
                    document.querySelector('.box2 img').src = `./img/原神${num}.jpg`
                    // 圆圈同步变化
                    document.querySelector('.box2 li.active').className = ''
                    let ulliobjs = document.querySelectorAll('.box2 li')
                    ulliobjs[num - 1].className = 'active'
                }, 1000);
            }
            startlunbo()
            // 鼠标移入停止定时器
            let pageobj = document.querySelectorAll('.box2 ul li')
            pageobj.forEach((item, i) => {
                //绑定移入事件
                item.onmouseover = function () {
                    clearInterval(t)
                    // 同步图片
                    document.querySelector('.box2 img').src = `./img/原神${i + 1}.jpg`
                    num = i + 1
                    document.querySelector('.box2 li.active').className = ''
                    document.querySelectorAll('.box2    li')[i].className = 'active'
                }
                item.onmouseout = function () {
                    startlunbo()
                }
            });
        })()

    </script>
</body>


</html>